<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>欢迎使用智慧校园系统</span>
            </div>
          </template>
          <div class="welcome-content">
            <el-avatar :size="64" :icon="UserFilled" />
            <h3>教师用户，您好！</h3>
            <p>今天是 {{ currentDate }}，祝您工作愉快！</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt-20">
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>我的课程</span>
              <el-button class="button" text>查看全部</el-button>
            </div>
          </template>
          <div class="data-overview">
            <div class="data-item">
              <div class="data-icon blue">
                <el-icon :size="24"><Reading /></el-icon>
              </div>
              <div class="data-info">
                <div class="data-title">本学期课程</div>
                <div class="data-value">4 门</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>学生管理</span>
              <el-button class="button" text>查看全部</el-button>
            </div>
          </template>
          <div class="data-overview">
            <div class="data-item">
              <div class="data-icon green">
                <el-icon :size="24"><User /></el-icon>
              </div>
              <div class="data-info">
                <div class="data-title">学生总数</div>
                <div class="data-value">120 人</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>今日课程</span>
            </div>
          </template>
          <div class="data-overview">
            <div class="data-item">
              <div class="data-icon orange">
                <el-icon :size="24"><Calendar /></el-icon>
              </div>
              <div class="data-info">
                <div class="data-title">课程数量</div>
                <div class="data-value">2 节</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>今日课程安排</span>
            </div>
          </template>
          <el-table :data="todayCourses" style="width: 100%">
            <el-table-column prop="time" label="时间" width="180" />
            <el-table-column prop="name" label="课程名称" />
            <el-table-column prop="class" label="班级" />
            <el-table-column prop="location" label="上课地点" />
            <el-table-column prop="students" label="学生人数" width="100" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已结束' ? 'info' : scope.row.status === '进行中' ? 'success' : 'primary'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default>
                <el-button size="small" type="primary">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>待批改作业</span>
              <el-button class="button" text>查看全部</el-button>
            </div>
          </template>
          <el-table :data="homeworks" style="width: 100%">
            <el-table-column prop="course" label="课程" />
            <el-table-column prop="title" label="作业标题" />
            <el-table-column prop="submitted" label="已提交/总数" />
            <el-table-column prop="deadline" label="截止日期" />
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>通知公告</span>
              <el-button class="button" text>发布通知</el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { UserFilled, Reading, User, Calendar } from '@element-plus/icons-vue'

// 获取当前日期
const now = new Date()
const currentDate = now.toLocaleDateString('zh-CN', { 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric', 
  weekday: 'long' 
})

// 今日课程数据
const todayCourses = ref([
  {
    time: '08:00-09:40',
    name: '高等数学',
    class: '计算机科学2301班',
    location: '教学楼A-101',
    students: 45,
    status: '已结束'
  },
  {
    time: '10:00-11:40',
    name: '大学英语',
    class: '软件工程2302班',
    location: '教学楼B-203',
    students: 38,
    status: '进行中'
  },
  {
    time: '14:00-15:40',
    name: '计算机基础',
    class: '人工智能2301班',
    location: '实验楼C-305',
    students: 42,
    status: '未开始'
  }
])

// 待批改作业
const homeworks = ref([
  {
    course: '高等数学',
    title: '第三章习题',
    submitted: '38/45',
    deadline: '2023-10-15'
  },
  {
    course: '大学英语',
    title: '期中作业',
    submitted: '30/38',
    deadline: '2023-10-18'
  },
  {
    course: '计算机基础',
    title: '实验报告',
    submitted: '25/42',
    deadline: '2023-10-20'
  }
])

// 通知公告
const activities = ref([
  {
    content: '发布了《高等数学》第四章课件',
    timestamp: '2023-10-10',
    type: 'primary'
  },
  {
    content: '《大学英语》期中考试安排已发布',
    timestamp: '2023-10-08',
    type: 'success'
  },
  {
    content: '《计算机基础》实验课调整至下周三',
    timestamp: '2023-10-05',
    type: 'warning'
  }
])
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 10px;
  
  .mt-20 {
    margin-top: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    
    h3 {
      margin: 15px 0 5px;
      font-size: 18px;
    }
    
    p {
      color: #606266;
      margin: 5px 0;
    }
  }
  
  .data-overview {
    .data-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      
      .data-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
        color: #fff;
        
        &.blue {
          background-color: #409EFF;
        }
        
        &.green {
          background-color: #67C23A;
        }
        
        &.orange {
          background-color: #E6A23C;
        }
      }
      
      .data-info {
        .data-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 5px;
        }
        
        .data-value {
          font-size: 20px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }
}
</style> 